<template>
  <div class="layout-all">
    <el-timeline>
      <el-timeline-item
        v-for="(item) in tableData"
        :key="item.id"
        placement="top"
        :icon="item.type%2==1?'el-icon-more-outline':'el-icon-more'"
        :type="type_bg_arr[item.type]"
        :color="copy_bg_arr[item.type]"
        size="large"
        :timestamp="item.date"
      >
        <el-card style="width :80%">
          <h4 style="margin-bottom:5px">{{type_arr[item.type]+' V'+item.version}}</h4>
          <p v-for="(msg,i) in item.content.split('\n')" :key="i">{{msg}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      style="margin 20px"
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      type_arr: [],
      type_bg_arr: ['primary','success','warning','danger','info'],
      copy_bg_arr: ['#0bbd87','rgb(118 134 224)','rgb(243 38 174)','rgb(38 243 220)','rgb(243 223 38)'],
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
      loading: false
    };
  },
  mounted() {
    this.onSearch();
  },
  methods: {
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      this.loading = true;
      const form = {};
      form.page = this.current_page;
      this.current_page = 1;
      this.get("/pub/UpdateLog/index", form, "POST").then(e => {
        this.tableData = e.list.data;
        this.type_arr = e.type_arr;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        this.loading = false;
      });
    }
  }
};
</script>


<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.layout-money {
  margin: 0 10px;
}
</style>